Let's say, I've got something like this:
<div id="some_id">
<img src="url1" id="el_id1" hidden>
<img src="url2" id="el_id2" hidden>
<img src="url3" id="el_id3" hidden>
</div>
And now, I need javascript to delete all this "hidden" attributes. I don't know the exact ids, I just know they all begins with prefixes of "el_id". How can I realize it using pure javascript?
So use attribute starts with selector and removeAttribute
var elems = document.querySelectorAll('img[id^="el_"][hidden]');
elems.forEach(function(elem) {
elem.removeAttribute("hidden");
});
[hidden] { display: none; }
<div id="some_id">
<img src="url1" id="el_id1" hidden>
<img src="url2" id="el_id2" hidden>
<img src="url3" id="el_id3" hidden>
</div>
Use document.querySelectorAll with a selector that:
<img> inside <div>id starting with el_hidden attributeRemove hidden from the found elements using removeAttribute()
document.querySelectorAll('div > img[id ^= "el_"][hidden]').forEach(e => e.removeAttribute("hidden"));
<div id="some_id">
<img src="url1" id="el_id1" hidden>
<img src="url2" id="el_id2" hidden>
<img src="url3" id="el_id3" hidden>
<img src="url3" id="dontdelete">
</div>